<template>
  <el-row class="ph kj">
    <el-col class="mfm" :span="24">
      <h1 class="tith" id="tith" ref="tith">AI监控中心看板</h1>
      <el-row class="main kj">
        <el-col class="ph" :span="24">
          <!--main start-->
          <el-row class="ph">
            <!--other left start-->
            <el-col :span="1">
              <div class="pwp">
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
              </div>
              <div class="rctwp">
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
              </div>

              <div class="nullwp"></div>
              &nbsp;
            </el-col>
            <!--other left end-->

            <!--m start-->
            <el-col class="ph ms" :span="22">
              <el-row>
                <el-col :span="8">
                  <!--服务器-->
                  <div class="mdata">
                    <h2 class="tith2">设备状态及离线率</h2>
                    <div class="hd spx">
                      <p>服务部名称</p>
                      <p>在线设备数量</p>
                      <p>离线设备数量</p>
                      <p>离线率</p>
                    </div>
                    <div v-if="msData.length" class="acrow"></div>
                    <Scroll
                      :class-option="optionSetting"
                      :data="msData"
                      class="seamless-warp"
                      ref="seamless-warp"
                    >
                      <div class="mq mqx" :key="item.id" v-for="item in msData">
                        <p v-text="item.name"></p>
                        <p v-text="item.onlinenum"></p>
                        <p v-text="item.offlinenum"></p>
                        <p v-text="item.wrn"></p>
                      </div>
                    </Scroll>
                  </div>
                  <!--end 服务器-->
                </el-col>
                <el-col :span="8" class="mddle">
                  <div class="mdata" style="height:326px">
                    <h2 class="tith2" style="margin-bottom:50px">预警关键指标</h2>
                    <div class="wrnwp">
                      <div class="l">
                        <div class="tx">预警总数</div>
                        <p v-text="wrns[0]"></p>
                      </div>
                      <div class="m">
                        <div class="tx">未处理预警总数</div>
                        <p v-text="wrns[0]"></p>
                      </div>
                      <div class="r">
                        <div class="tx">已处理预警总数</div>
                        <p v-text="wrns[0]"></p>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="mdata">
                    <h2 class="tith2">预警信息</h2>
                    <div class="hd sp1 mv2">
                      <p style="display:none">区域</p>
                      <p>公司</p>
                      <p>技术员</p>
                      <p>养户</p>
                      <p style="display:none">规模</p>
                      <p class="sp">预警时间</p>
                      <p>预警等级</p>
                      <p>异常人/猪数</p>
                      <p style="display:none">异常数</p>
                      <p>状态</p>
                      <p>反馈结果</p>
                    </div>
                    <div v-if="maData.length" class="acrow"></div>
                    <Scroll
                      :class-option="optionSetting"
                      :data="maData"
                      class="seamless-warp"
                      ref="seamless-warps"
                    >
                      <div @click="videoSel(item)" :key="item.id" class="mq mv" v-for="item in maData">
                        <p style="display:none" v-text="item.area"></p>
                        <p v-text="item.cpy"></p>
                        <p v-text="item.user"></p>
                        <p v-text="item.yh"></p>
                        <p style="display:none" v-text="item.gm"></p>
                        <p class="sp" v-text="item.wrn"></p>
                        <p v-text="item.j" :style="'color:' + item.c"></p>
                        <p v-text="item.wpuser"></p>
                        <p style="display:none" v-text="item.wuser"></p>
                        <p v-text="item.status"></p>
                        <p v-text="item.res"></p>
                      </div>
                    </Scroll>
                  </div>
                </el-col>
              </el-row>
              <el-row class="i">
                <el-col class="ph xr" :span="8">
                  <div class="child" style="margin-bottom:10px">
                    <div class="inmap">
                      <h2 class="tith2">预警未处理数量和比例</h2>
                      <div class="cvs k">
                        <div ref="cvs1" class="t"></div>
                        <div>
                          <div
                            style="margin:0 5px 5px 5px;border-top:1px solid #fff;display:none"
                          ></div>

                          <table style="display:none" class="wj">
                            <tr>
                              <th></th>
                              <th
                                :key="item"
                                v-for="item in mzData.xData"
                                v-text="item"
                              ></th>
                            </tr>
                            <tr>
                              <td
                                style="text-align:left;padding-left:5px"
                                width="70"
                              >
                                <span
                                  style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#db4a84;"
                                ></span>
                                未处理
                              </td>
                              <td
                                :key="item + '-' + Math.random()"
                                v-for="item in mzData.noData"
                                v-text="item"
                              ></td>
                            </tr>
                            <tr>
                              <td style="text-align:left;padding-left:5px">
                                <span
                                  style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f1f317;"
                                ></span>
                                比例
                              </td>
                              <td
                                :key="item + '-' + Math.random()"
                                v-for="item in mzData.bfbData"
                                v-text="item + '%'"
                              ></td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="child">
                    <div class="inmap">
                      <h2 class="tith2">近七日预警总数及等级分布</h2>
                      <div class="cvs k">
                        <div class="t" ref="cvs2"></div>
                        <div></div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col class="ph mddle" :span="8">
                  <div class="inmap">
                    <h2 class="tith2">预警热感图</h2>
                    <div class="selwp">
                      <div
                        @click="selTab(0)"
                        :class="'i ' + (mapFlg === 0 ? 'ac' : '')"
                      >
                        7日
                      </div>
                      <div
                        @click="selTab(1)"
                        :class="'i ' + (mapFlg === 1 ? 'ac' : '')"
                      >
                        30日
                      </div>
                    </div>
                    <div class="cvs" ref="cvs"></div>
                  </div>
                </el-col>
                <el-col class="ph xr" :span="8">
                  <div class="child" style="margin-bottom:10px">
                    <div class="inmap">
                      <h2 class="tith2">抓取视频</h2>
                      <div class="cvs">
                        <video ref="vd1" :poster="videoDf"></video>
                      </div>
                    </div>
                  </div>
                  <div class="child">
                    <div class="inmap">
                      <h2 class="tith2">抓取图像</h2>
                      <div class="cvs">
                        <video ref="vd2" :poster="videoDf1"></video>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <!--m end-->

            <!--other right start-->
            <el-col :span="1">
              <div class="pwp r">
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
                <p class="point"></p>
              </div>
              <div class="rctwp r">
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
                <p class="rct"></p>
              </div>

              <div class="nullwp r"></div>
              &nbsp;
            </el-col>
            <!--other right end-->
          </el-row>
          <!--main end-->
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
.wrnwp{
  p{
    font-family: "微软雅黑",Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #1ffff7;
  }
  display: flex;
  text-align: center;
  .tx{
    font-size: 22px;
  }
  &>div{
    padding: 40px 0;
    border:1px solid #999;
    border-radius: 5px;
    flex: 1;
  }
  .m{
    margin: 0 10px;
  }
}
.vd {
  height: 100%;
}
.wj {
  // table-layout: fixed;
  width: 100%;
  color: #fff;
  td,
  th {
    text-align: center;
    font-weight: normal;
    font-size: 12px;
  }
}
.cvs {
  video {
    width: 100%;
    display: none;
  }
  padding-top: 48px;
  margin-top: -48px;
  width: 100%;
  height: 100%;
  &.k {
    display: flex;
    flex-direction: column;
    .t {
      flex: 1;
    }
  }
}
.inmap {
  padding: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid #1ffff7;
  border-radius: 5px;
  position: relative;
  .selwp {
    display: flex;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 999;
    .i {
      min-width: 80px;
      text-align: center;
      color: #fff;
      padding: 5px 20px;
      background: #0a3849;
      border-radius: 10px;
      margin-right: 10px;
      &.ac {
        background: #1ffff7;
      }
    }
  }
}
.mddle {
  padding: 0 10px;
}
.tith2 {
  margin-top: 0px;
  font-size: 20px;
  color: #ffffff;
  border-bottom: 2px solid #1ffff7;
  line-height: 28px;
  display: inline-block;
  padding-right: 20px;
}
.seamless-warp {
  flex: 1;
  height: 229px;
  overflow: hidden;
  // &:hover{
  //   overflow-y: scroll;
  // }
}
.mv p {
  font-size: 12px !important;
  width: 11.42857142% !important;
}
.mq {
  display: flex;
  p {
    width: 8%;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
  }
}
.mqx {
  p {
    width: 25%;
  }
}
.kj {
  background: url("../../assets/image/bj.jpg") no-repeat;
  background-size: 100%;
  background-color: #020918;
}
.ph {
  height: 100%;
}
.tith {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 40px;
  padding: 20px 0;
  border-bottom: 2px solid #0a3849;
  margin-bottom: 20px;
  color: #ffffff;
}
.mfm {
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
  }
}

.pwp {
  position: absolute;
  left: 20px;
  top: 10px;
  &.r {
    left: auto;
    right: 20px;
    top: 75%;
  }
}
.point {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #1ffff7;
}
.rctwp {
  &.r {
    left: auto;
    right: 10px;
    top: 30%;
  }
  position: absolute;
  left: 10px;
  top: 40%;
}
.rct {
  width: 40px;
  height: 5px;
  background: #1ffff7;
  transform: skewX(-45deg) rotate(30deg);
}
.nullwp {
  &.r {
    left: auto;
    right: 10px;
    top: 10%;
  }
  position: absolute;
  top: 90%;
  width: 20px;
  height: 20px;
  left: 10px;
  border: 3px solid #1ffff7;
  border-radius: 10px;
}
.ms {
  display: flex;
  flex-direction: column;
  .i {
    padding-bottom: 35px;
    flex: 1;
  }
}
.xr {
  display: flex;
  flex-direction: column;
  .child {
    flex: 1;
  }
}

.mdata {
  position: relative;
  border: 1px solid #1a6e6c;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  margin-bottom: 20px;
  .hd {
    &.sp1 {
      p {
        width: 11.42857142%;
        font-size: 12px;
      }
    }
    &.spx {
      p {
        width: 25%;
      }
    }
    display: flex;
    p {
      width: 8%;
      margin: 0;
      padding: 0;
      font-size: 18px;
      background: #0a3849;
      color: #54f5d9;
      line-height: 28px;
      text-align: center;
    }
  }
}
.acrow {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 84px;
  background: #1ffff7;
  height: 28px;
}
.mv2 .sp,
.mv .sp {
  width: 20% !important;
}
</style>
<script>
import echarts from "echarts";
import df from "@/assets/image/df.jpg";
import request from "@/utils/request";
import Scroll from "vue-seamless-scroll";
export default {
  methods: {
    videoSel(item){
      this.videoDf = item.src1;
      this.videoDf1 = item.src2;
    },
    vd() {
      const vd1 = this.$refs.vd1,
        vd2 = this.$refs.vd2;

      vd1.style.display = "none";
      vd2.style.display = "none";

      vd1.style.height = vd1.parentNode.scrollHeight - 48 + "px";
      vd2.style.height = vd2.parentNode.scrollHeight - 48 + "px";

      vd1.style.display = "block";
      vd2.style.display = "block";
    },
    rs() {
      clearTimeout(this.rsz);
      this.rsz = setTimeout(() => {
        try {
          // console.log(this.el, this.zb, this.q);

          this.el.resize();
          this.zb.resize();
          this.q.resize();

          // video
        } catch (e) {
        } finally {
          this.vd();
        }
      }, 100);
    },
    drawZ({ xData, wrn1, wrn2, wrn3, wrn4 } = obj) {
      const myChart = echarts.init(this.$refs.cvs2);
      this.q = myChart;
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56"
            }
          }
        },
        legend: {
          show: false,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          axisLine: {
            //x轴
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff"
            }
          },
          splitLine: {
            show: false
          },
          type: "category",
          data: xData
        },
        yAxis: {
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff"
            }
          },
          splitLine: {
            show: false
          },
          type: "value"
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#4378e5" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0fc6ff" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            name: "一级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn1
          },
          {
            itemStyle: {
              normal: {
                color: "#f5713b"
              }
            },
            name: "二级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn2
          },
          {
            itemStyle: {
              normal: {
                color: "#14feff"
              }
            },
            name: "三级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn3
          },
          {
            itemStyle: {
              normal: {
                color: "#fff100"
              }
            },
            name: "四级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn4
          }
        ]
      });
    },
    drawZW({ xData, noData, bfbData, larea, rarea } = obj) {
      // console.log(778899);
      const myChart = echarts.init(this.$refs.cvs1);
      this.zb = myChart;
      myChart.setOption({
        tooltip: {
          formatter: function(params) {
            //数据单位格式化
            var relVal = params[0].name; //x轴名称
            for (var i = 0, l = params.length; i < l; i++) {
              // console.log(params[i].marker);
              relVal +=
                "<br />" +
                params[i].marker.replace(/\[.*?\]/, "#de4a82") +
                params[i].seriesName +
                params[i].value +
                (params[i].seriesName.indexOf("比例") > -1 ? "%" : "");
            }

            return relVal;
          },
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56"
            }
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: "#fff"
          },
          data: ["未处理", "比例"]
        },
        grid: {
          left: "10%", // 图表距边框的距离
          right: "10%",
          top: "10%",
          bottom: "10%"
        },
        xAxis: [
          {
            axisLine: {
              //x轴
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff"
              }
            },
            splitLine: {
              show: false
            },
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            axisLine: {
              //y轴
              show: false
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "",
            min: larea[0],
            max: larea[1],
            interval: 200,
            axisLabel: {
              textStyle: {
                color: "#ffffff"
              },
              formatter: "{value}"
            }
          },
          {
            axisLine: {
              //x轴
              show: false
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "",
            min: rarea[0],
            max: rarea[1],
            interval: 10,
            axisLabel: {
              textStyle: {
                color: "#ffffff"
              },
              formatter: "{value}%"
            }
          }
        ],
        series: [
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#de4a82" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4f64e8" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            name: "未处理",
            type: "bar",
            data: noData
          },
          {
            smooth: true,
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "#e9ea1f",
                lineStyle: {
                  color: "#b1ddfd" //折线颜色
                }
              }
            },
            name: "比例",
            type: "line",
            yAxisIndex: 1,
            data: bfbData
          }
        ]
      });
    },
    selTab(flg = 0) {
      // interface 获取地图
      console.log(flg);
      this.mapFlg = flg;
      this.initMap();
    },
    initMap() {
      if (!this.el) {
        this.el = echarts.init(this.$refs.cvs);
      }

      var myChart = this.el;
      var option = {};

      request({
        url: "/aiboard/warn/selectWarnThermalFigure",
        method: "post",
        params: { mapFlg: this.mapFlg }
      }).then(res => {
        // 假数据
        const jsj = res.data;

        const { geoJson, area, items } = jsj;

        myChart.hideLoading();

        echarts.registerMap("SX", geoJson);

        myChart.setOption(
          (option = {
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>{c}"
            },
            toolbox: {
              show: false,
              orient: "vertical",
              left: "right",
              top: "center",
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            visualMap: {
              textStyle: {
                color: "#fff",
                fontSize: 14
              },
              min: area[0],
              max: area[1],
              text: ["高", "低"],
              realtime: false,
              calculable: true,
              inRange: {
                color: ["lightskyblue", "yellow", "orangered"]
              }
            },
            series: [
              {
                name: "",
                type: "map",
                mapType: "SX", // 自定义扩展图表类型
                label: {
                  show: true
                },
                data: items
              }
            ]
          })
        );
      });
    }
  },
  computed: {
    optionSetting() {
      return {
        step: 1,
        limitMoveNum: 5,
        singleHeight: 28,
        waitTime: 5000
      };
    }
  },
  data() {
    return {
      // 预警关键指标
      wrns: [],
      // 预警未处理数量和比例
      zb: null,
      // 近七日预警总数及等级分布
      q: null,
      // 默认视频图
      videoDf: "",
      videoDf1: "",
      //柱状
      mbData: [],
      // 柱状线图
      mzData: [],
      // map指针
      el: null,
      // 地图的切换游标
      mapFlg: 0,
      // 服务器数据
      msData: [],
      // 预警
      maData: []
    };
  },
  mounted() {
    this.initMap();

    // 默认视频第一帧
    // this.videoDf = df;
    // this.videoDf1 = df;

    request({
      url: "/aiboard/camera/selectCameraOnAndOffList",
      method: "post"
    }).then(res => {
      //console.log(res.data);
      this.msData = res.data;
    });

    request({
      url: "/aiboard/warn/selectAiWarnListByUserId",
      method: "post"
    }).then(res => {
      //console.log(res.data);
      this.maData = res.data;
      this.videoDf = res.data[0].src1;
      this.videoDf1 = res.data[0].src2;
    });

    // 柱线
    request({
      url: "/aiboard/warn/selectUntreatedWarnAmount",
      method: "post"
    }).then(res => {
      this.mzData = res.data;
      //console.log(res.data);
      //this.msData = res.data;
      this.drawZW(this.mzData);
    });

    // 柱状
    request({
      url: "/aiboard/warn/selectWarnDistribute",
      method: "post"
    }).then(res => {
      this.mbData = res.data;
      this.drawZ(this.mbData);
      //console.log(res.data);
      //this.msData = res.data;
    });

    // 预警关键指标
    request({
      url: "/aiboard/warn/selectWarnKeyIndicators",
      method: "post"
    }).then((res)=>{
      this.wrns = res.data.wrns;
    })
    

    // vd
    this.vd();

    // resize
    window.addEventListener("resize", this.rs);

    // 跑定时任务5分钟刷新一次
    setTimeout(() => {
      window.location.reload(true);
    }, 1000 * 60 * 10);
  },
  destroyed() {
    window.removeEventListener("resize", this.rs);
  },
  components: {
    Scroll
  }
};
</script>
